<template> 
  <el-card>
      <div class="box">
        <img :src = "userStore.avatar" alt="" class="avatar">
        <div class="bottom">
            <h3 class="title">{{ getTime()}}好！{{ userStore.username}}</h3>
            <p>魔方平台</p>
        </div>
      </div>
      
  </el-card>
  <div class="bot"> <svg-icon name="welcome" width="600px" height ="300px"> </svg-icon></div>
</template>

<script setup lang="ts">
// //引入组合式API函数之生命周期函数
// import { onMounted } from 'vue';
// //获取仓库
// import useUserStore from "@/store/modules/user";
// let userStore = useUserStore();
// //目前首页挂载完毕发送请求获取用户信息
// onMounted(()=>{
//   userStore.userInfor()
// })
import {getTime} from "@/utils/times"
// 引入用户相关的仓库，获取当用户的头像给、昵称
import useUserStore from "@/store/modules/user"
// 获取存储用户信息的仓库对象
let userStore = useUserStore   ();
</script>

<style lang="scss" scoped>
.box{
  display:flex;
  .avatar{
    width:100px;
    height:100px;
    border-radius:50%;
  }


  .bottom{
    margin-left:20px; 
    .title{
    font-size:28px;
    font-weight:900;
    margin-bottom:30px;
  }
  p{
    font-style:italic;
    color:#ccc
  }
  }
}
.bot{
  display:flex;
  justify-content:center
}
</style> 
